<template>
  <!-- 碳汇数据 -->
  <div class="carbon-sink-data-box">
    <div class="TreeCard-box" :class="{'is-expand':!isExpand}" :style="{width: `${expandLeft}px`}">
      <TreeCard
        class="tree-card"
        :tree-config="treeConfig"
        @clickBtn="clickBtn"
        @handleNodeClick="handleNodeClick"
      />
    </div>
    <div class="expand-box" :style="{left:`calc(${expandLeft}px)`}" @click="handleExpand">
      <i :class="[isExpand ? 'el-icon-caret-left' : 'el-icon-caret-right']" />
    </div>
    <div class="CardItems-box">
      <CardItems
          ref="tableCard"
          :outer-params="nodeSelect"
          :card-config="cardConfig"
          :pop-config="popConfig"
          :select-config="selectConfig"
          :header-config="headerConfig"
      />
    </div>
  </div>
</template>

<script>
  import CardItems from '@/components/CardItems/index.vue'
  import { cardConfig } from './config/cardConfig'
  import { popConfig } from './config/popConfig'
  import { headerConfig } from './config/tableConfig'
  import { selectConfig } from './config/selectConfig'
  import TreeCard from '@/components/TreeCard/index.vue'
  import { treeConfig } from '@/views/sceneManage/sceneProject/config/cardConfig'

  export default {
    name: 'CarbonSinkData',
    components: {
      TreeCard,
      CardItems
    },
    data() {
      return {
        isExpand: true,
        expandLeft: 200,
        nodeSelect: {},
      }
    },
    computed: {
      treeConfig() {
        return treeConfig['scene-project'] || {}
      },
      /**
       * 卡片配置
       */
      cardConfig() {
        return cardConfig['carbon-sink-data'] || {}
      },
      /**
       * 弹窗配置
       */
      popConfig() {
        return popConfig['carbon-sink-data'] || {}
      },
      /**
       * 筛选配置
       */
      selectConfig() {
        return selectConfig['carbon-sink-data'] || []
      },
      /**
       * 表头配置
       */
      headerConfig() {
        return headerConfig['carbon-sink-data'] || []
      }
    },
    methods: {
      handleExpand() {
        this.isExpand = !this.isExpand
        this.expandLeft = this.isExpand ? 200 : 0
      },
      clickBtn(btn) {
        if (btn.id === 'all') {
          this.handleNodeClick({ type: 0 })
        }
      },
      handleNodeClick(data) {
        this.type = data.type
        if (data.type === 1) {
          this.nodeSelect = { sceneProjectId: data.id }
        } else if (data.type === 2) {
          this.nodeSelect = { sceneEdificeId: data.id }
        } else if (data.type === 3) {
          this.nodeSelect = { sceneFloorId: data.id }
        } else if (data.type === 4) {
          this.nodeSelect = { id: data.id }
        } else {
          this.nodeSelect = {}
        }
        this.$nextTick(() => {
          this.$refs.tableCard?.getData()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .carbon-sink-data-box {
    display: flex;
    width: 100%;
    height: 100%;

    .expand-box {
      position: absolute;
      top: 50%;
      height: 40px;
      line-height: 40px;
      width: 12px;
      text-align: center;
      margin-top: -20px;
      font-size: 12px;
      color: #909399;
      background-color: #ededed;
      border-radius: 0 4px 4px 0;
      transition: left 0.3s;
      cursor: pointer;
      z-index: 3;

      &:hover {
        background-color: #ddd;
      }

      .el-input__icon {
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
      }
    }

    .TreeCard-box {
      height: 100%;
      transition: all 0.3s;

      .tree-card {
        border: 1px solid #eee;
        background-color: #fff;
      }

      &.is-expand {
        overflow: hidden;
        margin-right: 0;
      }
    }

    .CardItems-box {
      flex: 1;
    }
  }
</style>
